<template>
  <cj-popup v-model="isShow" round position="bottom" :close-on-click-overlay="false" class="changeline-popup">
    <div class="c-w100 c-bg-white c-flex-column c-pz1 c-pb20 c-br-tl20 c-br-tr20 c-p">
      <div class="c-fs28 c-hh80 c-lh80 c-fc-xblack c-textAlign-c c-fw600 c-p c-bd-b1">直播评价</div>
      <div class="iconfont c-fs20 c-fc-gray c-pa  c-p-r20 c-p-t20 c-pz10" @click="closeModal">&#xe61b;</div>
      <div class="c-ph24 c-pb80">
        <div class="c-fc-xblack c-fs24 c-fw600 c-pt32 c-pb28">您对本场直播还满意吗？</div>
        <div class="c-fs22c-ph10  c-flex-row c-aligni-center c-justify-sb">
          <div class="c-flex-row c-aligni-center ">
            <div v-for="index in 5" :key="index" class="c-ww48 c-hh48 c-mr14" :class="index <= curRankIndex ? 'star_s' : 'star_d'" @click="clickChangeRank(index)"></div>
          </div>
          <span v-if="commentTemplateArr.length > 0" class="c-fs24 c-fc-xblack"> {{ curRankIndex }}分，{{ commentTemplateArr[curRankIndex - 1].content }} </span>
        </div>
        <div class="c-ph20 iptClass c-br12 c-mt36">
          <textarea v-model="inputCom" class="textarea needsclick c-lh42" :placeholder="remark" :maxlength="200" @blur="blurInput"></textarea>
          <div class="c-textAlign-r c-fs20 c-pb16 c-fc-gray">{{ inputCom.length }}/200</div>
        </div>
        <div v-if="isStudentMultiEval" class="c-mt32">
          <div v-for="(item, index) in multiContent" :key="index" class="c-mb24">
            <liveCommentMult :multi-content="item" @changeMult="changeMult"></liveCommentMult>
          </div>
        </div>
      </div>
      <section class=" c-flex-row c-pl32 c-pr24 c-aligni-center c-justify-sb c-bd-t1 c-hh88 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white c-pz1">
        <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end c-w0">
          <div class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-br36 c-fs28" @click="commentPost">发布评价</div>
        </div>
      </section>
    </div>
  </cj-popup>
</template>

<script>
import { utilJs } from '@/utils/common.js';
import liveCommentMult from '@/components/templates/live/liveCommentMult.vue';
let isLoading = false;
export default {
  name: 'Comment',
  components: {
    liveCommentMult
  },
  props: {
    prodId: {
      type: Number,
      default: 0
    },
    prodType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isShow: false,
      curRankIndex: 5,
      commentTemplateArr: [],
      isStudentMultiEval: 1,
      isNeedAudit: 0,
      multiContent: [],
      inputCom: '',
      remark: '观看本场直播，收获怎么样，是否值得推荐给朋友听?向大伙分享下学习心得吧~',
      type: 0
    };
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  deactivated() {},
  mounted() {},
  methods: {
    openCommentSet(msgtype) {
      this.type = msgtype;
      this.getLiveList();
    },
    blurInput() {
      setTimeout(() => {
        window.scrollTo(0, 0);
      }, 100);
    },
    closeModal() {
      this.isShow = false;
    },
    clickChangeRank(index) {
      if (this.curRankIndex == index) {
        this.curRankIndex = 1;
      } else {
        this.curRankIndex = index;
      }
    },
    // 获取评论列表
    getLiveList() {
      utilJs.getMethod(
        global.apiurl + 'comment/commentTemplate?prodId=' + this.prodId + '&prodType=' + this.prodType,
        res => {
          this.commentTemplateArr = res.commentTemplateArr;
          this.isStudentMultiEval = res.isStudentMultiEval;
          this.isNeedAudit = res.isNeedAudit;
          this.multiContent = res.multiContent;
          this.inputCom = res.content;
          this.curRankIndex = res.level;
          this.remark = res.remark;
          this.isShow = true;
        },
        failRes => {
          this.closeModal()
        }
      );
    },
    changeMult(item) {
      console.log(item);
      for (const index in this.multiContent) {
        if (item.ctId == this.multiContent[index].ctId) {
          this.multiContent[index] = item;
        }
      }
      console.log(this.multiContent);
    },
    // prodId	number
    // prodType	number
    // level	number
    // content	string
    // multiContent	object []
    // item 类型: object
    // ctId	number
    // level	number
    // content	string
    // prodType	number,
    commentPost() {
      if (this.inputCom.length < 6) {
        this.$showCjToast({
          text: '评价的字数不能少于6个字',
          type: 'warn'
        });
        return;
      }
      if (isLoading) {
        return;
      }
      isLoading = true;
      utilJs.postMethod(
        global.apiurl + 'comment/submit',
        {
          prodId: this.prodId,
          prodType: this.prodType,
          level: this.curRankIndex,
          content: this.inputCom,
          multiContent: this.multiContent
        },
        res => {
          isLoading = false;
          if (this.isNeedAudit == 1) {
            this.$showCjToast({
              text: '发布成功，已开启审核功能，评价需要审核后才会展示',
              type: 'success'
            });
          } else {
            this.$showCjToast({
              text: '发布成功',
              type: 'success'
            });
          }
          this.closeModal();
          if (this.type == 24) {
            this.$emit('changeCommentLiveEnd');
          } else if (this.type == 25) {
            this.$emit('changeCommentLiveReload');
          }
          this.$emit('changeCommentList');
        },
        failRes => {
          this.closeModal()
          isLoading = false;
        }
      );
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrap {
  white-space: normal;
  word-break: break-all;
}
.star_s {
  background: url('../../../assets/i/wap/live/comment.png');
  background-position-x: -1.2rem;
  background-position-y: 0;
  background-size: auto 100%;
}
.star_d {
  background: url('../../../assets/i/wap/live/comment.png');
  background-position-x: 0;
  background-position-y: 0;
  background-size: auto 100%;
}
.iptClass {
  background: #f2f3f2;
  border: 2px solid #f2f3f2;
}
.textarea {
  font-size: 0.6rem;
  outline: none;
  border: none;
  width: 100%;
  height: 4rem;
  background: none;
  -webkit-appearance: none;
  resize: none;
  padding: 0.5rem 0;
}
.textarea:focus {
  outline: none;
}
.textarea::-webkit-input-placeholder {
  color: #999;
}
</style>
